<template>
  <view class="detail-container">
    <view class="post-content">
      <view class="author-info">
        <image src="/static/avatar1.png" class="avatar" />
        <view class="author-meta">
          <text class="name">朋知云学官方</text>
          <text class="time">2023-09-01</text>
        </view>
      </view>
      
      <view class="post-meta">
        <text class="subject-tag">使用教程</text>
      </view>
      
      <view class="content-section">
        <text class="section-title">小程序使用教程</text>
        
        <view class="tutorial-section animate-in">
          <view class="tutorial-icon-container">
            <text class="tutorial-icon">🔍</text>
          </view>
          <view class="tutorial-content">
            <text class="tutorial-subtitle">1. 浏览支教需求</text>
            <text class="tutorial-text">在首页可以浏览所有支教需求，包括紧急需求、长期招募、学科教学等不同类别。点击顶部的分类导航可以筛选不同类型的需求。</text>
          </view>
        </view>
        
        <view class="tutorial-section animate-in">
          <view class="tutorial-icon-container">
            <text class="tutorial-icon">✏️</text>
          </view>
          <view class="tutorial-content">
            <text class="tutorial-subtitle">2. 发布支教需求</text>
            <text class="tutorial-text">点击右下角的"+"按钮或底部导航栏的"投稿"选项，填写支教需求的详细信息，包括学校名称、地点、需求科目、人数等信息后提交。</text>
          </view>
        </view>
        
        <view class="tutorial-section animate-in">
          <view class="tutorial-icon-container">
            <text class="tutorial-icon">👥</text>
          </view>
          <view class="tutorial-content">
            <text class="tutorial-subtitle">3. 申请加入支教团队</text>
            <text class="tutorial-text">在需求详情页面，点击"申请组队"按钮，填写您的联系方式和申请说明后提交申请。您可以在"我的-我的申请"中查看申请状态。</text>
          </view>
        </view>
        
        <view class="tutorial-section animate-in">
          <view class="tutorial-icon-container">
            <text class="tutorial-icon">❤️</text>
          </view>
          <view class="tutorial-content">
            <text class="tutorial-subtitle">4. 收藏感兴趣的需求</text>
            <text class="tutorial-text">浏览需求时，点击右上角的心形图标可以收藏该需求。您可以在"我的-我的收藏"中查看所有收藏的需求。</text>
          </view>
        </view>
        
        <view class="tutorial-section animate-in">
          <view class="tutorial-icon-container">
            <text class="tutorial-icon">🤖</text>
          </view>
          <view class="tutorial-content">
            <text class="tutorial-subtitle">5. 使用AI小助手</text>
            <text class="tutorial-text">点击右下角的AI小助手图标，可以获取个性化的支教推荐、适合的队伍分析和个性化建议，帮助您更好地参与支教活动。</text>
          </view>
        </view>
        
        <view class="tutorial-section animate-in">
          <view class="tutorial-icon-container">
            <text class="tutorial-icon">👤</text>
          </view>
          <view class="tutorial-content">
            <text class="tutorial-subtitle">6. 管理个人资料</text>
            <text class="tutorial-text">在"我的"页面，您可以查看和编辑个人资料，包括姓名、联系方式、教学经验等信息，完善的个人资料有助于提高申请成功率。</text>
          </view>
        </view>
      </view>
      
      <view class="interaction-bar">
        <view class="post-actions">
          <view class="action-item" hover-class="action-hover">
            <image src="/static/分享1.png" class="action-icon" mode="aspectFit"></image>
            <text>分享</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      post: {
        id: 'pinned-1',
        title: '小程序使用教程',
        content: '小程序使用教程：点击右下角',
        author: '朋知云学官方',
        timestamp: '2023-09-01',
        subject: '使用教程',
        isPinned: true,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 30rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
  
  .post-content {
    background-color: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
    padding: 30rpx;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5rpx);
      box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.12);
    }
    
    .author-info {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        border: 3rpx solid #5bc0eb;
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.05);
        }
      }
      
      .author-meta {
        display: flex;
        flex-direction: column;
        
        .name {
          font-size: 30rpx;
          font-weight: bold;
          color: #333;
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
          margin-top: 6rpx;
        }
      }
    }
    
    .post-meta {
      margin-bottom: 30rpx;
      
      .subject-tag {
        display: inline-block;
        background: linear-gradient(135deg, #5bc0eb, #4a9ed6);
        color: #fff;
        font-size: 24rpx;
        padding: 8rpx 20rpx;
        border-radius: 30rpx;
        box-shadow: 0 4rpx 8rpx rgba(91, 192, 235, 0.3);
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-2rpx);
          box-shadow: 0 6rpx 12rpx rgba(91, 192, 235, 0.4);
        }
      }
    }
    
    .content-section {
      margin-bottom: 40rpx;
      
      .section-title {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 60rpx;
        position: relative;
        padding-bottom: 20rpx;
        text-align: center;
        
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 120rpx;
          height: 6rpx;
          background: linear-gradient(90deg, #5bc0eb, #4a9ed6);
          border-radius: 3rpx;
        }
      }
      
      .tutorial-section {
        margin-bottom: 40rpx;
        padding: 30rpx;
        background-color: #f8f9fa;
        border-radius: 16rpx;
        border-left: 8rpx solid #5bc0eb;
        display: flex;
        align-items: flex-start;
        transition: all 0.3s ease;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
        
        &:hover {
          transform: translateX(5rpx);
          box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
          background-color: #f0f7fc;
        }
        
        .tutorial-icon-container {
          margin-right: 20rpx;
          width: 60rpx;
          height: 60rpx;
          background: linear-gradient(135deg, #5bc0eb, #4a9ed6);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          box-shadow: 0 4rpx 8rpx rgba(91, 192, 235, 0.3);
          
          .tutorial-icon {
            font-size: 32rpx;
            color: #fff;
          }
        }
        
        .tutorial-content {
          flex: 1;
        }
        
        .tutorial-subtitle {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 20rpx;
          display: block;
        }
        
        .tutorial-text {
          font-size: 28rpx;
          color: #666;
          line-height: 1.6;
          display: block;
        }
      }
      
      .animate-in {
        opacity: 0;
        transform: translateY(20rpx);
        animation: fadeInUp 0.6s forwards;
        animation-delay: calc(var(--index, 0) * 0.1s);
      }
      
      @keyframes fadeInUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      .tutorial-section:nth-child(2) {
        --index: 1;
      }
      
      .tutorial-section:nth-child(3) {
        --index: 2;
      }
      
      .tutorial-section:nth-child(4) {
        --index: 3;
      }
      
      .tutorial-section:nth-child(5) {
        --index: 4;
      }
      
      .tutorial-section:nth-child(6) {
        --index: 5;
      }
      
      .tutorial-section:nth-child(7) {
        --index: 6;
      }
    }
    
    .interaction-bar {
      border-top: 2rpx solid #f0f0f0;
      padding-top: 30rpx;
      
      .post-actions {
        display: flex;
        justify-content: flex-end;
        
        .action-item {
          display: flex;
          align-items: center;
          margin-left: 30rpx;
          padding: 10rpx 20rpx;
          border-radius: 30rpx;
          transition: all 0.3s ease;
          
          .action-icon {
            width: 40rpx;
            height: 40rpx;
            margin-right: 10rpx;
          }
          
          text {
            font-size: 26rpx;
            color: #666;
          }
        }
        
        .action-hover {
          background-color: #f0f7fc;
        }
      }
    }
  }
}

@media screen and (max-width: 375px) {
  .detail-container {
    padding: 20rpx;
    
    .post-content {
      padding: 20rpx;
      
      .content-section {
        .tutorial-section {
          padding: 20rpx;
          
          .tutorial-subtitle {
            font-size: 28rpx;
          }
          
          .tutorial-text {
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
</style>